<template>
  <div class="update-category">
    <el-button type="text" icon="Edit" @click="showDialog = true"> {{ buttonText || "修改分类"}} </el-button>
    <el-dialog title="修改分类" v-model="showDialog">
      <el-form ref="categoryRef" :model="categoryForm" :rules="categoryRules">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="categoryForm.name" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <el-form-item label="分类英文" prop="slug">
          <el-input v-model="categoryForm.slug" placeholder="请输入分类英文"></el-input>
        </el-form-item>
        <el-form-item label="排序级别" prop="index">
          <el-input v-model.number="categoryForm.index" placeholder="请输入排序级别" type="number"></el-input>
        </el-form-item>
        <!-- <el-form-item label="父级" prop="parent_category_id">
          <el-select v-model="categoryForm.parent_category_id" filterable placeholder="是否选择父级">
            <el-option v-for="cat in internalParentCategoryList" :key="cat.id" :label="cat.name" :value="cat.id" />
          </el-select>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateCategory">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>

import { ref, defineProps, defineEmits, onMounted, watch } from 'vue';
import blogApi from '../api/blog.js';
import { ElMessage } from 'element-plus';

//定义props
const props = defineProps({
    // 控制对话框显示
    modelValue: {
        type: Boolean,
        default: false
    },
    // 按钮文本
    buttonText: {
        type: String,
        default: '修改分类'
    },
    // 父级分类list
    parentCategoryList: {
        type: Array,
        default: () => []
    },
    // 当前分类数据
    category: {
        type: Object,
        default: () => ({})
    }
});

// 修改：将内部ref重命名，避免与props冲突
const internalParentCategoryList = ref([]);

// 定义事件
const emit = defineEmits(['update:modelValue', 'updated', 'error'])

const showDialog = ref(props.modelValue);

//监听
watch(() => props.modelValue, (newVal) => {
    showDialog.value = newVal;
})

// 修改：更新监听的目标变量
watch(() => props.parentCategoryList, (newVal) => {
    console.log("parentCategoryList:", newVal);
    internalParentCategoryList.value = newVal;
})

// 监听分类数据变化，更新表单
watch(() => props.category, (newVal) => {
    if (newVal && Object.keys(newVal).length > 0) {
        categoryForm.value = { ...newVal };
    }
}, { deep: true })

watch(showDialog, (newVal) => {
    emit('update:modelValue', newVal)
})

const categoryRef = ref(null);
const categoryForm = ref({
    id: 0,
    name: '',
    slug: '',
    index: 0,
    parent_category_id: null
});

// 验证规则
const categoryRules = ref({
  name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { min: 2, max: 20, message: '分类名称长度应在2-20个字符之间', trigger: 'blur' }
  ],
  slug: [
    { min: 2, max: 20, message: '分类英文长度应在2-20个字符之间', trigger: 'blur' }
  ],
  index: [
    { required: true, type:"number", message: '请输入排序级别', trigger: 'blur' },
    { type:"number",min: 0, max: 100, message: '排序级别应在0-100之间', trigger: 'blur' }
  ],
  parent_category_id: [
    { required: false, message: '请选择父级分类', trigger: 'blur' }
  ]
})

const handleUpdateCategory = async () => {
    const res = await blogApi.UpdateCategory(categoryForm.value);
    if (res.code === 0) {
        ElMessage.success('修改成功');
        emit('updated', res.data);
        showDialog.value = false;
    }
    else {
        ElMessage.error(res.msg);
        emit('error', res.msg);
    }
}

</script>

<style scoped>
.update-category .el-dialog {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.update-category .el-dialog__title {
  color: var(--text-primary);
}

.update-category .el-form-item__label {
  color: var(--text-primary);
}

.update-category .el-input__inner {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  transition: all 0.3s ease;
}

.update-category .el-input__inner:focus {
  border-color: var(--highlight);
}

.update-category .el-button--primary {
  background-color: var(--highlight);
  border-color: var(--highlight);
  transition: all 0.3s ease;
}

.update-category .el-form-item {
  margin-bottom: 20px; /* 增加表单项之间的垂直间距 */
}

.update-category .el-button--primary:hover {
  opacity: 0.9;
}
</style>